<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('审批流程表')">导出</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <!-- 高级查询区域 -->
      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">

              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="intolc(record.flowcode)">进入流程</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <!--流程图-->
    <!--编辑添加设置流程节点-->
    <a-modal v-model="visible" title="流程图展示及节点设置" @ok="handleOk">
      <a-timeline>
        <a-timeline-item :color="todo.color" v-for="todo in todos">
          <div v-for="tod in todo">
            <a-dropdown :trigger="['contextmenu']">
              <div v-for="to in tod">
                <a-card v-for="to in tod" style="width: 300px;" @mouseover="mouseOver(to.id,to.sortid)">
                  <p>* {{ to.nodename }}- {{ to.auditchildtype }}</p>

                  <p>* {{ to.audittype }} -{{ to.auditname }}</p>

                </a-card>
              </div>
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="1">
                  添加上级
                </a-menu-item>
                <a-menu-item key="2">
                  添加下级
                </a-menu-item>
                <a-menu-item key="3">
                  编辑
                </a-menu-item>
                <a-menu-item key="4">
                  删除
                </a-menu-item>
              </a-menu>
            </a-dropdown>

          </div>
        </a-timeline-item>
      </a-timeline>

    </a-modal>

    <!--节点增删改-->
<!--    <tt-collect-flow-node-model ref="modalForm1" @ok="modalFormOk"></tt-collect-flow-node-model>-->

    <tt-collect-flow-modal ref="modalForm" @ok="modalFormOk"></tt-collect-flow-modal>
  </a-card>
</template>

<script>

import {httpAction, getAction, deleteAction} from '@/api/manage'
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import TtCollectFlowModal from './modules/TtCollectFlowModal'
import TtCollectFlowNodeModal from './modules/TtCollectFlowNodeModal'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import {FormModel} from 'ant-design-vue'
import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'

export default {
  name: 'TtCollectFlowList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    TtCollectFlowModal,
    JSuperQuery,
    JDictSelectTag,
    FormModel
  },
  data() {
    return {
      jdid: '',
      sortid: '',
      listmol: {},
      description: '审批流程表管理页面',
      visible: false,
      isshowjdsz: false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      todos: [],

      form: {
        auditname: '',
        auditchildtype: '',
        flowcode: ''

      },

      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '流程编码',
          align: 'center',
          dataIndex: 'flowcode'
        },
        {
          title: '流程名称',
          align: 'center',
          dataIndex: 'flowname'
        },
        {
          title: '流程类型',
          align: 'center',
          dataIndex: 'flowtype_dictText'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: '/tt_question_collect/ttCollectFlow/list',
        delete: '/tt_question_collect/ttCollectFlow/delete',
        deleteBatch: '/tt_question_collect/ttCollectFlow/deleteBatch',
        exportXlsUrl: '/tt_question_collect/ttCollectFlow/exportXls',
        importExcelUrl: 'tt_question_collect/ttCollectFlow/importExcel',
        flowcodelist: '/tt_question_collect/ttCollectFlowNode/lcszjdlist',
        add: '/tt_question_collect/ttCollectFlowNode/add',
        edit: '/tt_question_collect/ttCollectFlowNode/edit',
        deletenode: '/tt_question_collect/ttCollectFlowNode/delete',
        queryByIdnode: '/tt_question_collect/ttCollectFlowNode/queryById'
      },
      dictOptions: {},
      superFieldList: []
    }
  },

  created() {
    this.getSuperFieldList()
  },

  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    mouseOver(id, sortid) {
      console.log(id, sortid)
      this.jdid = id
      this.sortid = sortid
    },
    modalFormOk(){
      if(this.form.flowcode){
        this.intolc(this.form.flowcode)
      }else {
        this.loadData();
      }
    },
    handleMenuClick(e) {
      console.log('click', e)
      if (e.key == 1) {
        console.log('添加上级')
        this.addflow('tjsyj')
      } else if (e.key == 2) {
        console.log('添加下级')
        this.addflow('tjxyj')
      } else if (e.key == 3) {
        console.log('编辑')
        this.editflow(this.jdid)
      } else if (e.key == 4) {
        this.delflow(this.jdid, this.sortid)
      }
    },

    // 增加节点
    addflow(val) {
      console.log(val)

      console.log(this.form.flowcode)
      let flowcodes = this.form.flowcode
      this.$refs.modalForm.add(flowcodes, val, this.sortid)
      this.$refs.modalForm.title = '新增节点'
      this.$refs.modalForm.disableSubmit = false
    },
    // 编辑节点
    editflow(id) {
      let params = {id: id}
      getAction(this.url.queryByIdnode, params).then((res) => {
        if (res.success) {
          this.listmol = res.result
          console.log(this.listmol)

          this.$refs.modalForm.edit(this.listmol, 'jdbj')
          this.$refs.modalForm.title = '编辑节点'
          this.$refs.modalForm.disableSubmit = false
        }
      })
    },
    // 删除节点
    delflow(id, sortid) {
      console.log('删除')
      console.log('删除', id)
      let params = {id: id, sortid: sortid}
      deleteAction(this.url.deletenode, params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.intolc(this.form.flowcode);
        }
        else {
          this.$message.warning(res.message)
        }
      })
    },

    intolc(flowcode) {
      console.log(flowcode)
      this.form.flowcode = flowcode
      let params = {flowcode: flowcode}
      getAction(this.url.flowcodelist, params).then((res) => {
        if (res.success) {
          let lis = res.result
          this.todos = lis
          for (let a = 0; a < this.todos.length; a++) {
            console.log(this.todos[a])
          }
        }
      })
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    initDictConfig() {
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({type: 'string', value: 'flowcode', text: '流程编码，唯一值，自动生成，用来关联节点审核表'})
      fieldList.push({type: 'string', value: 'flowname', text: '流程名称'})
      fieldList.push({type: 'string', value: 'flowtype', text: '流程类型', dictCode: 'bpm_process_type'})
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
